<template>
  <div ref="mescroll" class="mescroll">
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
// 引入mescroll.min.js和mescroll.min.css
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'

export default {
  name: 'MeScroll',
  props: {
    up: {
      type: Object,
      default: () => {},
    },
    down: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      mescroll: null,
      lastScrollTop: 0, // 路由切换时滚动条的位置
      lastBounce: null, // 路由切换时是否禁止ios回弹
    }
  },
  mounted() {
    // eslint-disable-next-line new-cap
    this.mescroll = new this.initMeScroll(this.$refs.mescroll, {
      up: this.up,
      down: this.down,
    })
    this.$emit('init', this.mescroll) // init回调mescroll对象
  },
  destroyed() {
    this.mescroll.destroy()
  },
  methods: {
    initMeScroll(mescrollId, options) {
      // 下拉刷新的布局内容
      let htmlContent = '<p class="downwarp-tip">↓ 下拉刷新 ↓</p>'
      htmlContent +=
        '<img class="downwarp-progress" src="https://suhoo.oss-cn-shenzhen.aliyuncs.com/refresh/mescroll-progress.png"/>'
      htmlContent +=
        '<img class="downwarp-slogan" src="https://suhoo.oss-cn-shenzhen.aliyuncs.com/refresh/mescroll-slogan.png"/>'
      // 自定义的配置 (以下注释部分等同于mescroll本身的默认配置,这里贴出来是为了便于理解,实际项目可直接删除)
      const myOption = {
        down: {
          htmlContent, // 布局内容
          inOffset(mescroll) {
            // 进入指定距离范围内那一刻的回调
            mescroll.downTipDom.innerHTML = '↓ 下拉刷新 ↓'
            mescroll.downProgressDom.classList.remove('mescroll-rotate')
          },
          outOffset(mescroll) {
            // 下拉超过指定距离那一刻的回调
            mescroll.downTipDom.innerHTML = '↑ 释放更新 ↑'
          },
          auto: false,
          inOffsetRate: 0.6, // 在列表顶部,下拉的距离小于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
        },
        up: {
          auto: false,
          toTop: {
            offset: 1000,
            src:
              'https://suhoo.oss-cn-shenzhen.aliyuncs.com/refresh/mescroll-totop.png', // 回到顶部按钮的图片路径
          },
        },
      }
      // 加入自定义的默认配置
      options = MeScroll.extend(options, myOption)
      // 创建MeScroll对象
      return new MeScroll(mescrollId, options)
    },
    beforeRouteEnter() {
      if (this.mescroll) {
        // 滚动到之前列表的位置
        if (this.lastScrollTop) {
          this.mescroll.setScrollTop(this.lastScrollTop)
          setTimeout(() => {
            // 需延时,因为setScrollTop内部会触发onScroll,可能会渐显回到顶部按钮
            this.mescroll.setTopBtnFadeDuration(0) // 设置回到顶部按钮显示时无渐显动画
          }, 16)
        }
        // 恢复到之前设置的isBounce状态
        if (this.lastBounce != null) this.mescroll.setBounce(this.lastBounce)
      }
    },
    beforeRouteLeave() {
      if (this.mescroll) {
        this.lastScrollTop = this.mescroll.getScrollTop() // 记录当前滚动条的位置
        this.mescroll.hideTopBtn(0) // 隐藏回到顶部按钮,无渐隐动画
        this.lastBounce = this.mescroll.optUp.isBounce // 记录当前是否禁止ios回弹
        this.mescroll.setBounce(true) // 允许bounce
      }
    },
  },
}
</script>
<style>
/* 下拉刷新--提示文本 */
.mescroll-downwarp .downwarp-tip {
  display: block;
  margin-bottom: 6px;
}

/* 下拉刷新,上拉加载--标语图片 */
.mescroll-downwarp .downwarp-slogan {
  width: auto;
  height: 28px;
  vertical-align: middle;
}

/* 下拉刷新,上拉加载--旋转进度条 */
.mescroll-downwarp .downwarp-progress {
  width: 30px;
  height: 30px;
  border: none;
  margin: auto;
}
</style>
